<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鉴定人选择</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .modal {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
            width: 500px;
            max-width: 90%;
            padding: 0;
            position: relative;
            overflow: hidden;
        }

        .modal-header {
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 22px;
            color: #999;
            cursor: pointer;
            outline: none;
        }

        .close-btn:hover {
            color: #333;
        }

        .modal-body {
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: bold;
            color: #333;
        }

        select, input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            background-color: #fff;
        }

        select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.762 2.938 10.825 4 6 8.825z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }

        select:focus, input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .assistant-info {
            background-color: #f5f5f5;
            border-radius: 4px;
            padding: 12px;
            margin-top: 10px;
            display: none;
        }

        .assistant-info.show {
            display: block;
        }

        .assistant-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .assistant-contact {
            color: #666;
            font-size: 13px;
        }

        .modal-footer {
            background-color: #f8f9fa;
            padding: 15px 20px;
            border-top: 1px solid #ddd;
            text-align: right;
        }

        .btn {
            display: inline-block;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
        }

        .btn-cancel {
            background-color: #fff;
            color: #333;
            border-color: #ddd;
            margin-right: 10px;
        }

        .btn-cancel:hover {
            background-color: #f5f5f5;
        }

        .btn-primary {
            background-color: #3498db;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #2980b9;
        }

        .btn-primary:disabled {
            background-color: #a0c9e6;
            cursor: not-allowed;
        }

        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .case-info {
            margin-bottom: 20px;
            padding: 12px;
            background-color: #f0f8ff;
            border-left: 3px solid #3498db;
            border-radius: 3px;
        }

        .case-info h3 {
            font-size: 16px;
            margin-bottom: 8px;
            color: #2c3e50;
        }

        .case-info p {
            margin: 5px 0;
            font-size: 14px;
            color: #34495e;
        }

        .case-info p span {
            color: #7f8c8d;
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="modal">
        <div class="modal-header">
            <div class="modal-title">分配鉴定人</div>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <div class="case-info">
                <h3>案件信息</h3>
                <p><span>案件编号：</span>CASE-2023-101</p>
                <p><span>案件类型：</span>临床鉴定</p>
                <p><span>委托人：</span>张三</p>
                <p><span>委托时间：</span>2023-11-15</p>
            </div>
            
            <div class="form-group">
                <label for="appraisal-number">鉴定号</label>
                <input type="text" id="appraisal-number" placeholder="请输入鉴定号（选填）">
            </div>
            
            <div class="form-group">
                <label for="first-appraiser">第一鉴定人</label>
                <select id="first-appraiser" required>
                    <option value="">请选择第一鉴定人</option>
                    <option value="1" data-assistant="张助理" data-dept="骨科">王医生（骨科）</option>
                    <option value="2" data-assistant="李助理" data-dept="神经科">赵医生（神经科）</option>
                    <option value="3" data-assistant="刘助理" data-dept="外科">钱医生（外科）</option>
                    <option value="4" data-assistant="陈助理" data-dept="内科">孙医生（内科）</option>
                </select>
                <div class="error-message" id="first-appraiser-error">请选择第一鉴定人</div>
                
                <div id="assistant-info" class="assistant-info">
                    <div class="assistant-name">关联助理：<span id="assistant-name">未选择</span></div>
                    <div class="assistant-contact">联系方式：<span id="assistant-contact">未选择</span></div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="second-appraiser">第二鉴定人</label>
                <select id="second-appraiser" required>
                    <option value="">请选择第二鉴定人</option>
                    <option value="5" data-dept="骨科">周医生（骨科）</option>
                    <option value="6" data-dept="神经科">吴医生（神经科）</option>
                    <option value="7" data-dept="外科">郑医生（外科）</option>
                    <option value="8" data-dept="内科">冯医生（内科）</option>
                </select>
                <div class="error-message" id="second-appraiser-error">请选择第二鉴定人</div>
            </div>
            
            <div class="form-group">
                <label for="reviewer">第三鉴定人（非必选）</label>
                <select id="reviewer">
                    <option value="">请选择第三鉴定人</option>
                    <option value="9">张主任</option>
                    <option value="10">李主任</option>
                    <option value="11">王主任</option>
                    <option value="12">刘主任</option>
                </select>
                <div class="error-message" id="reviewer-error">请选择第三鉴定人</div>
            </div>
            
            <div class="form-group">
                <label for="comments">备注</label>
                <input type="text" id="comments" placeholder="请输入备注信息（选填）">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-cancel" id="cancel-btn">取消</button>
            <button class="btn btn-primary" id="confirm-btn" disabled>确认</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const firstAppraiserSelect = document.getElementById('first-appraiser');
            const secondAppraiserSelect = document.getElementById('second-appraiser');
            const reviewerSelect = document.getElementById('reviewer');
            const assistantInfo = document.getElementById('assistant-info');
            const assistantName = document.getElementById('assistant-name');
            const assistantContact = document.getElementById('assistant-contact');
            const confirmBtn = document.getElementById('confirm-btn');
            const cancelBtn = document.getElementById('cancel-btn');
            const closeBtn = document.querySelector('.close-btn');
            
            // 初始化时检查表单状态
            validateForm();
            
            // 获取URL参数中的案件ID
            const urlParams = new URLSearchParams(window.location.search);
            const caseId = urlParams.get('caseId') || 'CASE-2023-101';
            
            // 更新案件信息显示
            document.querySelector('.case-info p:first-child').innerHTML = `<span>案件编号：</span>${caseId}`;
            
            // 错误信息元素
            const firstAppraiserError = document.getElementById('first-appraiser-error');
            const secondAppraiserError = document.getElementById('second-appraiser-error');
            const reviewerError = document.getElementById('reviewer-error');
            
            // 助理联系方式数据
            const assistantContacts = {
                '张助理': '13800138001',
                '李助理': '13800138002',
                '刘助理': '13800138003',
                '陈助理': '13800138004'
            };
            
            // 监听第一鉴定人选择变化
            firstAppraiserSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                const assistantValue = selectedOption.getAttribute('data-assistant');
                
                // 重置第二鉴定人选择
                resetSecondAppraiserOptions();
                
                if (assistantValue) {
                    assistantInfo.classList.add('show');
                    assistantName.textContent = assistantValue;
                    assistantContact.textContent = assistantContacts[assistantValue] || '未知';
                    firstAppraiserError.classList.remove('show');
                    
                    // 更新第二鉴定人选项，避免选择相同科室的医生
                    const selectedDept = selectedOption.getAttribute('data-dept');
                    if (selectedDept) {
                        Array.from(secondAppraiserSelect.options).forEach(option => {
                            if (option.getAttribute('data-dept') === selectedDept) {
                                option.style.color = '#999';
                                option.disabled = true;
                            }
                        });
                    }
                } else {
                    assistantInfo.classList.remove('show');
                    assistantName.textContent = '未选择';
                    assistantContact.textContent = '未选择';
                }
                
                validateForm();
            });
            
            // 重置第二鉴定人选项
            function resetSecondAppraiserOptions() {
                Array.from(secondAppraiserSelect.options).forEach(option => {
                    option.style.color = '';
                    option.disabled = false;
                });
            }
            
            // 监听第二鉴定人选择变化
            secondAppraiserSelect.addEventListener('change', function() {
                if (this.value !== '') {
                    secondAppraiserError.classList.remove('show');
                }
                validateForm();
            });
            
            // 监听第三鉴定人选择变化
            reviewerSelect.addEventListener('change', function() {
                validateForm();
            });
            
            // 表单验证
            function validateForm() {
                const isFirstAppraiserSelected = firstAppraiserSelect.value !== '';
                const isSecondAppraiserSelected = secondAppraiserSelect.value !== '';
                const isReviewerSelected = reviewerSelect.value !== '';
                
                // 显示或隐藏错误消息
                if (!isFirstAppraiserSelected) {
                    firstAppraiserError.classList.add('show');
                }
                
                if (!isSecondAppraiserSelected) {
                    secondAppraiserError.classList.add('show');
                }
                
                // 第三鉴定人为非必选，不显示错误消息
                reviewerError.classList.remove('show');
                
                // 判断第一鉴定人和第二鉴定人是否相同
                let isDuplicate = false;
                if (isFirstAppraiserSelected && isSecondAppraiserSelected) {
                    isDuplicate = firstAppraiserSelect.value === secondAppraiserSelect.value;
                }
                
                // 启用或禁用确认按钮（第三鉴定人非必选）
                confirmBtn.disabled = !isFirstAppraiserSelected || !isSecondAppraiserSelected || isDuplicate;
                
                // 调试信息
                console.log('表单验证状态：', {
                    isFirstAppraiserSelected,
                    isSecondAppraiserSelected,
                    isReviewerSelected,
                    isDuplicate,
                    confirmBtnDisabled: confirmBtn.disabled
                });
            }
            
            // 关闭弹窗，返回原页面
            function closeModal() {
                console.log('关闭弹窗被点击');
                if (confirm('确定要取消选择吗？已填写的内容将不会保存。')) {
                    console.log('用户确认关闭');
                    // 直接返回上一页
                    window.location.href = document.referrer || 'AI新委托案件库.html';
                }
            }
            
            // 绑定关闭按钮和取消按钮事件
            if (cancelBtn) {
                console.log('绑定取消按钮事件');
                cancelBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    closeModal();
                });
            } else {
                console.error('取消按钮未找到');
            }
            
            if (closeBtn) {
                console.log('绑定关闭按钮事件');
                closeBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    closeModal();
                });
            } else {
                console.error('关闭按钮未找到');
            }
            
            // 绑定确认按钮事件
            if (confirmBtn) {
                console.log('绑定确认按钮事件');
                confirmBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('确认按钮被点击');
                    
                    // 再次验证表单
                    validateForm();
                    
                    if (this.disabled) {
                        console.log('确认按钮被禁用，请先完成表单');
                        alert('请先选择所有必填项');
                        return;
                    }
                    
                    const appraisalNumber = document.getElementById('appraisal-number').value;
                    const firstAppraiser = firstAppraiserSelect.options[firstAppraiserSelect.selectedIndex].text;
                    const secondAppraiser = secondAppraiserSelect.options[secondAppraiserSelect.selectedIndex].text;
                    const reviewer = reviewerSelect.options[reviewerSelect.selectedIndex].text;
                    const assistant = assistantName.textContent;
                    const comments = document.getElementById('comments').value;
                    
                    const confirmMessage = `
                        分配成功！
                        案件编号: ${caseId}
                        ${appraisalNumber ? '鉴定号: ' + appraisalNumber : ''}
                        第一鉴定人: ${firstAppraiser}
                        关联助理: ${assistant}
                        第二鉴定人: ${secondAppraiser}
                        ${reviewer ? '第三鉴定人: ' + reviewer : ''}
                        ${comments ? '备注: ' + comments : ''}
                    `;
                    
                    alert(confirmMessage);
                    
                    // 直接返回上一页
                    window.location.href = document.referrer || 'AI新委托案件库.html';
                });
            } else {
                console.error('确认按钮未找到');
            }
        });
    </script>
</body>
</html> 